<template>
  <view class="pages bg-#ffffff">
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <mt-navbar title="" :show-back="false" bg-color="rgba(0,0,0,0)"> </mt-navbar>
        <view class="text-48rpx text-#1C213E font-bold text-center pt-24rpx mb-32rpx">请选择您的服务范围</view>
        <view class="text-32rpx text-#727687 text-center mb-40rpx">请在以下子类目中选择您可以提供的服务范围</view>
      </template>
      <view
        v-for="item in dataList"
        :key="item.id"
        class="flex items-center justify-between px-32rpx py-46rpx"
        style="border-bottom: 2rpx solid #e6e6e6"
      >
        <view class="w-540rpx text-32rpx text-#1C213E ellipsis break-all">{{ item.productName }}</view>
        <view class="btn" :class="{ active: !checkIds.includes(item.id) }" @click="handleChangeCheck(item)">
          <image
            v-show="!checkIds.includes(item.id)"
            class="w-28rpx h-28rpx mr-4rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-we1.svg"
          ></image>
          <image
            v-show="checkIds.includes(item.id)"
            class="w-28rpx h-28rpx mr-4rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-we2.svg"
          ></image>
          <text class="text-28rpx">{{ checkIds.includes(item.id) ? '取消' : '选择' }}</text>
        </view>
      </view>

      <template #bottom>
        <view class="safety-16 px-32rpx pt-28rpx bg-#ffffff">
          <view class="footer-scroll mb-28rpx">
            <text class="text-28rpx text-#1C213E mr-40rpx">已选</text>
            <view class="flex-1 min-w-0">
              <scroll-view class="h-full" style="white-space: nowrap" :show-scrollbar="false" scroll-x>
                <view v-for="item in checkRows" :key="item.id" class="block-li">
                  <text>{{ item.productName }}</text>
                  <image
                    class="icon w-28rpx h-28rpx ml-4rpx"
                    src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-we3.svg"
                    @click="handleChangeCheck(item)"
                  ></image>
                </view>
              </scroll-view>
            </view>
          </view>
          <mt-button class="w-full" :shake="false" shape="circle" @click="handleSubmit">我选好啦</mt-button>
        </view>
      </template>
    </z-paging>

    <mt-modal ref="modalRef" class="custom">
      <view class="modls">
        <view class="tops mb-36rpx">
          <image
            class="w-360rpx h-190rpx"
            style="margin-top: -50rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/information-product2.png"
          ></image>
          <view class="text-40rpx text-#1C213E font-bold">设置成功</view>
        </view>
        <view class="text-28rpx text-#727687 text-center px-40rpx pb-40rpx"
          >服务范围设置成功，如需修改或新增其他服务类目，或在服务过程中存在任何问题，请联系您的专属客服</view
        >
      </view>
    </mt-modal>
  </view>
</template>

<script setup>
import { productgetProductPageAppV2, providerProductApplyaddOrUpdateProviderProductAppV2 } from '@/api/mixed';

const modalRef = ref();

const checkIds = ref([]);
const checkRows = ref([]);
function handleChangeCheck(row) {
  const index = checkIds.value.findIndex((son) => son === row.id);
  if (index >= 0) {
    checkIds.value.splice(index, 1);
    checkRows.value.splice(index, 1);
  } else {
    checkIds.value.push(row.id);
    checkRows.value.push(row);
  }
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value,
      productCategoryId: productCategoryId.value
    };
    let res = await productgetProductPageAppV2(params);
    const list = res.data?.items || [];
    lastId.value = list[list.length - 1]?.id;
    pagingRef.value.complete(res.data.items);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

async function handleSubmit() {
  if (!checkIds.value.length) {
    uni.showToast({
      icon: 'none',
      title: '请选择产品'
    });
    return;
  }
  await providerProductApplyaddOrUpdateProviderProductAppV2({ productIdList: checkIds.value });
  modalRef.value.open({
    showTitle: false,
    slot: true,
    showCancel: false,
    confirmText: '开始接单',
    success: (e) => {
      if (e.confirm) {
        uni.reLaunch({
          url: '/pages/index/index'
        });
      }
    }
  });
}

const productCategoryId = ref('');
onLoad((options) => {
  productCategoryId.value = options.productCategoryId;
  nextTick(() => {
    pagingRef.value.reload();
  });
});
</script>

<style lang="scss" scoped>
.pages {
  position: relative;
  height: calc(100vh - var(--window-top));
}
.footer-scroll {
  display: flex;
  align-items: center;
  height: 60rpx;
  .block-li {
    display: inline-block;
    font-size: 28rpx;
    color: #1484ee;
    line-height: 28rpx;
    padding: 14rpx 16rpx;
    margin-right: 16rpx;
    background-color: rgba(20, 132, 238, 0.1);
    border-radius: 8rpx;
    .icon {
      vertical-align: middle;
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120rpx;
  height: 58rpx;
  color: #727687;
  font-weight: bold;
  background-color: #ffffff;
  border: 2rpx solid #e6e6e6;
  border-radius: 58rpx;
  &.active {
    color: #ffffff;
    border-color: #1484ee;
    background: linear-gradient(130deg, #1484ee 0%, #0d78dd 100%);
  }
}
.custom.mt-modal {
  :deep(.mt-modal-body) {
    padding: 0 !important;
  }
}
.modls {
  .tops {
    height: 190rpx;
    text-align: center;
    background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/information-product1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>
